<template>
  <el-container class="main-container">
    <el-aside class="main-aside" :class="{ 'main-aside-folded': menuFolded }">
      <div class="logo">
        <div class="logo-icon">
          <img :src="logo" alt="" />
        </div>
        <span class="title">BIU-FLINK 管理平台</span>
      </div>
      <el-scrollbar>
        <el-menu
          :router="true"
          :default-active="(currentRoute.meta as any).belongMenuPath || currentRoute.path"
          :collapse="menuFolded"
          :collapse-transition="false"
        >
          <template v-for="(route, index) in menuRoutes" :key="index">
            <el-sub-menu
              v-if="(route.meta as any).sub !== false && route.children?.length > 0"
              :index="route.path"
            >
              <template #title>
                <el-icon>
                  <component :is="route.meta?.icon" />
                </el-icon>
                <span>{{ (route.meta as any).title }}</span>
              </template>
              <el-menu-item
                v-for="(subRoute, subIndex) in route.children"
                :key="subIndex"
                :index="subRoute.path"
              >
                <template #title>
                  <span style="padding-left: 10px">{{ (subRoute.meta as any).title }}</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item v-else :index="route.path">
              <el-icon>
                <component :is="route.meta?.icon" />
              </el-icon>
              <template #title>
                <span>{{ (route.meta as any).title }}</span>
              </template>
            </el-menu-item>
          </template>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header class="main-header">
        <div class="header-left">
          <el-icon :size="22">
            <menu-unfold-one
              @click="menuFolded = true"
              v-if="!menuFolded"
              theme="filled"
              :strokeWidth="3"
            />
            <menu-fold-one @click="menuFolded = false" v-else theme="filled" :strokeWidth="3" />
          </el-icon>
          <el-page-header style="margin-left: 10px" :icon="ArrowLeft as any" @back="router.go(-1)">
            <!-- Line 1 -->
            <template #content>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item
                  v-for="(item, index) in breadcrumb"
                  :key="item.path"
                  :to="item.path as string"
                  :class="{ 'page-title': index === breadcrumb.length - 1 }"
                >
                  {{ item.name }}
                </el-breadcrumb-item>
              </el-breadcrumb>
            </template>
          </el-page-header>
        </div>
        <el-dropdown>
          <span class="right-bar">
            <el-icon :size="22">
              <me theme="filled" :strokeWidth="2" />
            </el-icon>
            超级管理员
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="showChangePassword = true" :icon="Key as any">
                修改密码
              </el-dropdown-item>
              <el-dropdown-item @click="doLogout()" :icon="Logout as any">
                退出登陆
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main>
        <RouterView />
      </el-main>
      <el-footer class="main-footer"> Copyright © BIU-FLINK 2023</el-footer>
    </el-container>
  </el-container>
  <change-password v-model="showChangePassword" />
</template>

<script setup lang="ts">
import router, { menuRoutes } from '@/router'
import logo from '@/assets/logo.svg'
import { Key, Logout, Me, MenuFoldOne, MenuUnfoldOne } from '@icon-park/vue-next'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import { useBreadcrumb } from '@/views/main/index'
import { ArrowLeft } from '@element-plus/icons-vue'
import ChangePassword from '@/views/main/ChangePassword.vue'
import { doLogout } from '@/api/passport-api'

const currentRoute = useRoute()

const menuFolded = ref(false)

const { breadcrumb } = useBreadcrumb()

const showChangePassword = ref(false)
</script>

<style scoped lang="scss">
@import 'index.scss';
</style>
